<template>
  <div id="login_page">
    <div class="login__header">
      <el-row class="login__header-inner" type="flex" justify="center" align="middle">
        <!--                <span class="el-tag login__header-version"></span>-->
        <el-col :span="12">
          <span>长安汽车 | 成本管理系统</span>
        </el-col>
        <el-col :span="12">
          <span class="pull-right">欢迎登录！</span>
        </el-col>
      </el-row>
    </div>
    <div class="login_body">
      <el-card class="box-card" id="login_wrapper" v-loading="loginLoading">
        <img src="@/assets/img/login-img.png" class="login__panel-img" />
        <div class="login__form">
          <p class="login__form-title">欢迎登录</p>
          <div>
            <el-input v-model="form.name" placeholder="请输入帐号">
              <template slot="prefix">
                <!-- <span class="svg-container"> -->
                <svg-icon name="user" />
                <!-- </span> -->
              </template>
              <!-- <i slot="prefix" class="iconfont icon-yonghuming"></i> -->
            </el-input>
          </div>
          <div>
            <el-input :type="pwdInput.pwdType" v-model="form.password" placeholder="请输入密码">
              <template slot="prefix">
                <svg-icon name="password" />
              </template>
              <template slot="suffix">
                <span @click="changePwdType">
                  <svg-icon :name="pwdInput.pwdClass" />
                </span>
              </template>
            </el-input>
          </div>
          <div>
            <el-button type="primary" @click="login" style="width: 100%">登录</el-button>
          </div>
        </div>
      </el-card>
    </div>
    <footer class="login__footer">
      <p class="login__footer-copyright"></p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Message } from "element-ui";
const form = ref({
  name: "000003",
  password: "",
})
const pwdInput = ref({
  pwdType: "password",
  pwdClass: "eye",
})
const loginLoading = ref(false)
const login = () => {
  // 模拟验证
  if (form.value.name.length < 3) {
    Message.error("请输入帐号");
    return false;
  }

  if (form.value.password.length < 3) {
    Message.error("请输入密码");
    return false;
  }

};
const changePwdType = () => {

  pwdInput.value.pwdType = pwdInput.value.pwdType === "password" ? "text" : "password";
  pwdInput.value.pwdClass =
    pwdInput.value.pwdClass === "eye"
      ? "eye-open"
      : "eye";
}

</script>

<style scoped lang="scss">
@import "./Login.scss";

:deep(.el-input__suffix) {
  line-height: 40px;
  cursor: pointer;
}
</style>
